<template>
	<view class="hire-page">
		<search-bar />
		<view class="tabs">
			<uv-tabs :list="tabList" lineColor="#FFC434" :scrollable="false" :inactiveStyle="inactiveStyle"
				:activeStyle="inactiveStyle" lineWidth="78rpx" lineHeight="8rpx" @click="tabChange"></uv-tabs>
		</view>
		<FilterBar @change="filterChange" />
		<!-- 车辆列表 -->
		<car-list :tableData="tableData" :status="status" @backInfo="backInfo" />
		<tabbar-bottom :curren="1" />
	</view>
</template>

<script setup>
	import TabbarBottom from '@/components/tabbar/TabbarBottom.vue'
	import SearchBar from './components/SearchBar.vue'
	import FilterBar from '@/components/FilterBar.vue'
	import CarList from '@/components/CarList.vue'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh,
	} from "@dcloudio/uni-app";
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		storeToRefs
	} from 'pinia'
	import {
		userList
	} from '@/hooks/userList.js'
	import {
		doProductList,
		doDetail
	} from '@/apis/car.js'
	import {
		ref,
		reactive,
		watch
	} from "vue";

	const useStore = useAppsStore()
	const {
		getCityName: cityName
	} = storeToRefs(useStore)

	const inactiveStyle = reactive({
		color: '#333333',
		fontSize: '32rpx',
		fontWeight: '550'
	})
	const tabList = reactive([{
		name: '平台自营',
		value: 'PROPRIETARY'
	}, {
		name: '优选车商',
		value: 'DEALER'
	}])
	let curren = 0
	const tabChange = (e) => {
		curren = e.index
		queryForm.value.type = tabList[curren].value
		onRefresh()
	}

	let filterForm = {}
	const filterChange = (e) => {
		filterForm = e
		onRefresh()
	}

	onLoad(async () => {
		uni.hideTabBar()
		if (!cityName.value) {
			await getApp().getCity()
		}
		onRefresh()
	})

	/**
	 * 
	 * 列表数据
	 * */
	const backInfo = async (e) => {
		const index = tableData.value.findIndex(el => el.id === e.id)
		const data = await doDetail(e.id)
		if (data.platform) {
			data.platform = JSON.parse(data.platform)
		} else {
			data.platform = []
		}
		tableData.value[index] = data
	}

	const getApi = async (params) => {
		params.city = cityName.value
		const res = await doProductList({
			...params,
			...filterForm
		})
		res.records = res.records.map(el => {
			if (el.platform) {
				el.platform = JSON.parse(el.platform)
			} else [
				el.platform = []
			]
			return el
		})
		return res
	}
	const {
		tableData,
		status,
		fetchData,
		onBottom,
		onRefresh,
		queryForm
	} = userList({
		apis: {
			getApi
		},
		initForm: {
			isShelves: true,
			type: 'PROPRIETARY'
		}
	})

	onPullDownRefresh(() => {
		onRefresh()
	})
	onReachBottom(() => {
		onBottom()
	})
	watch(cityName, () => {
		onRefresh()
	})
</script>

<style lang="scss" scoped>
	.hire-page {
		.tabs {
			position: relative;
			z-index: 101;
			background-color: #fff;
			padding: 24rpx 24rpx;
		}
	}
</style>